# ======================== 上：npm打包  下：nginx运行 ========================
# 参阅 https://gitee.com/yunmj/yudao-supply-chain/blob/master/docker/web/web-Dockerfile

# node镜像
FROM node:20-alpine as build-stage
#FROM registry.cn-chengdu.aliyuncs.com/liyujiang/nodejs:latest as build-stage
LABEL authors="山野羡民（1032694760@qq.com）"

RUN echo "-------------------- Vue.js 项目构建 --------------------"

# 指定接下来的工作路径为/app  - 类似于cd命令
WORKDIR /app
# 拷贝前端项目到app目录下
COPY ./ .

# 设置华为的源
RUN npm config set registry https://mirrors.huaweicloud.com/repository/npm/
RUN npm install -g pnpm --registry=https://mirrors.huaweicloud.com/repository/npm/
# 安装依赖
RUN pnpm install
# 构建生成 dist
RUN pnpm run build:prod

# nginx镜像
FROM nginx:alpine as release-stage
#FROM registry.cn-chengdu.aliyuncs.com/liyujiang/nginx:latest as release-stage
LABEL authors="山野羡民（1032694760@qq.com）"

RUN echo "-------------------- Vue.js 项目发布 --------------------"

# 移除nginx容器的default.conf文件、nginx配置文件
RUN rm /etc/nginx/conf.d/default.conf
RUN rm /etc/nginx/nginx.conf
# 把主机的nginx.conf文件复制到nginx容器的/etc/nginx文件夹下
COPY ./nginx.conf /etc/nginx/
# 拷贝前端vue项目打包后生成的文件到nginx下运行
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露端口供外部访问，端口配置见 nginx.conf
EXPOSE 80

# 注：CMD不同于RUN，CMD用于指定在容器启动时所要执行的命令，而RUN用于指定镜像构建时所要执行的命令。
#    RUN指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定--no-cache参数，如：docker build --no-cache

# 使用daemon off的方式将nginx运行在前台保证镜像不至于退出
CMD ["nginx", "-g", "daemon off;"]


